<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>工单查看</title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<style>
			html,body,.container{height: 100%;}
			header.content-header {
				color: #333;
				border-bottom: 1px solid #F2F2F2;
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 15px;
			}
			.content-header i.layui-icon.layui-icon-next {
				transform: rotate(90deg);
				display: inline-block;
				margin-left: 5px;
				font-weight: normal;
			}
			.form-title{font-weight: bold;text-align: right;}
			.form-content{color: #666;}
			.order-detail>.layui-row{line-height: 30px;}
			.layui-tab-content{height: calc(100% - 40px);overflow: hidden;}
			.layui-tab-content .layui-tab-item{height: 100%;overflow: auto;}
			.layui-tab{margin:0}
			.container{min-width: 800px;}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="layui-tab layui-tab-brief" lay-filter="orders">
			  <ul class="layui-tab-title">
				<li class="layui-this">工单信息</li>
				<li>处理信息</li>
			  </ul>
			  <div class="layui-tab-content" >
				<div class="layui-tab-item layui-show order-detail" >
					<header class="content-header">基本信息<i class="layui-icon layui-icon-next"></i></header>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">工单类型：</div>
							<div class="layui-col-sm8 form-content">PC</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">工单状态：</div>
							<div class="layui-col-sm8 form-content"><span class="layui-btn layui-btn-sm layui-btn-warm">处理中</span></div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">工单编号：</div>
							<div class="layui-col-sm8">WL20190425012</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">优先级：</div>
							<div class="layui-col-sm8 form-content"><span class="mgl10">普通</span><span class="mgl10 red strong ">优先</span><span class="mgl10">紧急</span></div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">标题：</div>
							<div class="layui-col-sm8 form-content">电脑开不了机</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">处理人：</div>
							<div class="layui-col-sm8 form-content"><a href="javascript:;">李艾</a></div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm2 form-title">描述：</div>
						<div class="layui-col-sm10 form-content">按电脑电源开关没反应，灯不亮，插线板指示灯正常，电源也插牢，怀疑是电脑电源问题，建议带一个备用电源测试或搬回检修。</div>
					</div>
					<header class="content-header">客户信息<i class="layui-icon layui-icon-next"></i></header>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">所在位置：</div>
							<div class="layui-col-sm8 form-content">博大大厦</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">门牌号：</div>
							<div class="layui-col-sm8 form-content">901</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">姓名：</div>
							<div class="layui-col-sm8 form-content">李敏</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">电话：</div>
							<div class="layui-col-sm8 form-content">010-65439876</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">部门：</div>
							<div class="layui-col-sm8 form-content">监察部</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">重点客户：</div>
							<div class="layui-col-sm8 form-content">否</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">电脑品牌：</div>
							<div class="layui-col-sm8 form-content">博大大厦</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">IP地址：</div>
							<div class="layui-col-sm8 form-content">192.168.1.101</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">生产日期：</div>
							<div class="layui-col-sm8 form-content">2019.5.1</div>
						</div>
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">MAC地址：</div>
							<div class="layui-col-sm8 form-content">00-3E-5F-65-7B-E0</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-sm6">
							<div class="layui-col-sm4 form-title">质保期：</div>
							<div class="layui-col-sm8 form-content">1年（2020.4.30）</div>
						</div>
					</div>
				</div>
				<div class="layui-tab-item">
					<table id="order_manage"></table>
				</div>
			  </div>
			</div>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script>
			$(function(){
				var data = [
							{id:1,node:'客服发起工单',suggest:'请带上备件',receiver:'李思',createTime:'2019.5.3 9:21',timelong:'5分钟',endTime:'2019.5.3 9:26',nextUser:'李艾'}
							,{id:2,node:'工程师接单',suggest:'',receiver:'李艾',createTime:'2019.5.3 9:21',timelong:'21分钟',endTime:'',nextUser:''}
						];
				layui.use(['table','element'],function(){
					var element = layui.element,table = layui.table;
					table.render({
						elem: '#order_manage'
						,height: '320'
						,url: '' //数据接口
						,page: true //开启分页
						,cols: [[ //表头
						  {field: 'xh', title: '序号', width:80,align:'center'
						  ,templet:function(d){
							  return d.LAY_INDEX;
						  }}
						  ,{field: 'node', title: '流程流程',align:'center', width:150}
						  ,{field: 'suggest', title: '处理意见', align:'center'}
						  ,{field: 'receiver', title: '处理人', width:120,align:'center'} 
						  ,{field: 'createTime', title: '到达时间', width: 100,align:'center'}
						  ,{field: 'timelong', title: '持续时长', width: 100,align:'center'}
						  ,{field: 'endTime', title: '处理时间', width: 150,align:'center'}
						  ,{field: 'nextUser', title: '下一环节', width: 150,align:'center'}
						 
						]]
						,data: data
					});
				})
			})
		</script>
	</body>
</html>
